<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.OrgManageMembersController as membersCtrl" class="container-pf-nav-pf-vertical container-fluid page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/org/org-manage-members_bc.include'"></div>
      <div class="row">
        <div class="col-md-12">
          <div class="apiman-filters apiman-members-filters">
            <div>
              <!-- Search for Members by name -->
              <apiman-search-box id="members-filter" apiman-i18n-key="filter-members" function="filterMembers" placeholder="Filter by member name or id..."></apiman-search-box>
            </div>
            <select apiman-i18n-key="manage-members.filter-by-roles" title="Filter by role(s)..." ng-options="role.id as role.name for role in roles" ng-model="selectedRoles" class="selectpicker" apiman-select-picker="" multiple ng-change="filterMembers(filterValue)">
            </select>
            <a href="{{ pluginName }}/orgs/{{ organizationId }}/new-member" class="btn btn-primary pull-right" apiman-i18n-key="add-member">Add Member</a>
          </div>
        </div>
      </div>
      <!-- Member list (cards) -->
      <div class="row">
        <div class="col-md-12 apiman-manage-members">
          <div class="container-fluid apiman-cards" data-field="cards">
            <div ng-repeat="member in filteredMembers">
              <apiman-user-card member="member" roles="roles" org-id="{{ organizationId }}"></apiman-user-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
